<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en" class="h-100">
<head>
    <meta charset="UTF-8">
    <title>跳蚤-个人闲置</title>

    <jsp:include page="${ctx}/page/common/css.jsp"/>

    <style>
        .fm-signin {
            width: 300px;
            margin: 100px auto;
        }
    </style>
</head>
<body class="d-flex flex-column h-100">
<jsp:include page="${ctx}/page/common/header.jsp"/>

<div class="container pt-4">
    <div class="container pt-5">
        <div class="row">
            <div class="col-2">
                <jsp:include page="${ctx}/page/user/menu.jsp"/>
            </div>
            <div class="col-10">
                <h4 class="border-bottom pb-2">
                    个人闲置
                    <a class="btn btn-info float-right mt-n1" href="#">增加</a>
                </h4>
                <form id="searchForm">
                    <div class="form-row align-items-center">
                        <div class="col-auto">
                            <label class="sr-only" for="inlineFormInput">关键字</label>
                            <input type="text" class="form-control mb-2" name="key" id="inlineFormInput"
                                   placeholder="输入关键字搜索">
                        </div>
                        <div class="col-auto">
                            <label class="sr-only" for="minPriceFormInput">最低价格</label>
                            <input type="number" class="form-control mb-2" name="minPrice" id="minPriceFormInput"
                                   placeholder="输入最低价格">
                        </div>
                        <div class="col-auto">
                            <button type="button" class="btn btn-primary mb-2" onclick="searchInfo();">搜索</button>
                        </div>
                    </div>
                </form>

                <table class="table table-hover" id="tb">
                    <thead>
                    <tr>
                        <th>#</th>
                        <th>标题</th>
                        <th>原价</th>
                        <th>现价</th>
                        <th>库存</th>
                        <th>更新时间</th>
                        <th>操作</th>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</div>


<jsp:include page="${ctx}/page/common/footer.jsp"/>

<jsp:include page="${ctx}/page/common/js.jsp"/>
<jsp:include page="${ctx}/page/common/datatables.jsp"/>
<script type="text/javascript">
    var tb;
    $(function () {
        //根据自定义查询条件，读取服务器数据
        tb = $('#tb').DataTable({
            ajax: {
                url: '${ctx}/user/products',
                method: 'get',
                data: searchParam
            },
            columns: [
                {data: 'id', className: 'text-center'},
                {data: 'name', className: 'text-center'},
                {data: 'originalPrice', className: 'text-center'},
                {data: 'currentPrice', className: 'text-center'},
                {data: 'inventory', className: 'text-center'},
                {data: 'createTime', className: 'text-center'},
                {orderable: false}
            ],
            columnDefs: [{
                targets: -1,
                className: 'text-center',
                render: function (data, type, row, meta) {
                    return '<div class="btn-group">'
                        + '<a class="btn btn-secondary btn-sm" title="Edit" href="${ctx}/product/edit?id=' + row.id + '">编辑</a>'
                        + '<button class="btn btn-danger btn-sm remove" title="Delete">删除</button></div></div>';
                }
            }]
        });

        $('#tb tbody').on('click', 'button.remove', function () {
            var data = tb.row($(this).parents('tr')).data();

        });
    });

    //返回搜索参数
    function searchParam(d) {
        //必须条用此方法，要不然无法排序
        flatten(d);

        var fields = $('#searchForm').serializeArray(); //自动序列化表单元素为JSON对象数据格式如下

        $.each(fields, function (i, field) {//设置查询参数
            d[field.name] = field.value;
        });
    }

    //执行搜索
    function searchInfo() {
        tb.ajax.reload();
    }
</script>
</body>
</html>
